<template>
    <div class="infomation4">
        <div class="container">
            <div class="font_text">
                <strong>完善你的个人名片</strong>
            </div>
            <!-- 头像内容部分 -->
            <div class="header_box">
                <div class="header_img_box">
                    <img class="header_img" :src="headerImage">
                </div>
                <div class="header_text_box">
                    <div class="header_text1">
                        <strong>{{ user.name }}</strong>
                    </div>
                    <div class="header_text2">
                        <span class="span_text">{{ message.age }}/{{ message.sex }}/{{ message.area }}/{{ message.career }}</span>
                    </div>
                </div>
            </div>
            <!-- 综合能力标签 -->
            <div class="label_btn_box">
                <button class="label_btn">
                    <img style="height: 20px; margin-right: 20px;" src="../../assets/419.svg">
                    <span>选择你的综合能力标签</span>
                </button>
            </div>
            <!-- 自我描述 -->
            <div class="desripetion">
                <div class="text">
                    <span>自我描述</span>
                </div>
                <div class="list_select">
                    <img src="../../assets/435.svg">
                    <img src="../../assets/436.svg">
                </div>
                <!-- 文本输入区 -->
                <div class="input_text">
                    <el-input
                    type="textarea"
                    maxlength="150"
                    show-word-limit
                    :rows="4"
                    placeholder="请输入内容"
                    v-model="textarea">
                    </el-input>
                </div>
            </div>
            <!-- 示例 -->
            <div class="smaple">
                <div class="text"><span>示例</span></div>
                <!-- 示例的头部分 -->
                <div class="smaple_header">
                    <div class="header_img_box1">
                        <img class="header_img" :src="headerImage" >
                    </div>
                    <div class="header_img_name">
                        <strong>{{ user.name }}</strong>
                    </div>
                    <div class="header_img_btn_parent">
                        <div class="header_img_btn">
                            <button class="turn_btn" @click="rotateImage">
                                <img 
                                style="height: 20px; margin-right: 5px; transition: transform 0.5s ease;" 
                                :style="{ transform: `rotate(${rotating}deg)`, transition: 'transform 0.5s ease' }"
                                src="../../assets/420.svg" 
                                >
                                <span>换一个</span>
                            </button>
                        </div>
                    </div>
                </div>
                <!-- 文本展示区 -->
                <div class="showtextarea">
                    <textarea readonly cols="58" rows="3">
                        {{ content }}
                    </textarea>
                </div>
            </div>
            <!-- 社交主页 -->
            <div class="social_box">
                <div class="text"><span class="">社交主页</span></div>
            </div>
            <div class="input_box">
                <div class="input_form">
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label-width="0" size="small">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="input_btn"><button class="btn" @click="add_acount">添加</button></div>
            </div>
            <div class="message">
                <span class="span_text1">添加突出你个人示例的主页，如：</span>
                <img src="../../assets/sina.png">
                <img src="../../assets/wechat.png">
                <img src="../../assets/QQ.png">
                <img src="../../assets/baidu.png">
            </div>
            <div class="text">
                <span>已添加({{ message.count }})</span>
            </div>
            <div class="btn_box">
                <div class="last_btn"><button @click="jump_last()">上一步</button></div>
                <div class="finsh_btn"><button @click="jump_finish()">完成</button></div>
            </div>
            <!-- 超文本跳转链接 -->
            <div class="link_text">
                <a href="">下载拉钩客户端，HR消息提醒更及时</a>
            </div>
        </div>
    </div>
</template>

<script>
import "@/assets/css/global.css"
import { mapState } from "vuex"

export default{
    name: 'Infomation4',
    computed:{
        ...mapState(['user'])
    },
    data(){
        return{
            headerImage : require("../../assets/704.jpg"),
            message:{
                name:'李小锅',
                age:'12',
                sex:'男',
                area:'贵阳',
                career:'学生',
                count: 0,
            },
            form:{},
            words:[
                {text:'人态度超好，非常热情，非常耐心的教我改正一些操作陋习和细节问题！准备再次购买服务。'},
                {text:'非常耐心的教我改正一些操作陋习和细节问题！人态度超好，非常热情，'},
                {text:'非常热情，人态度超好，非常耐心的教我改正一些操作陋习'},
            ],
            content: '非常热情，人态度超好，非常耐心的教我改正一些操作陋习',
            textarea: '',
            rotating:0,
            i:0,
        }
    },
    methods:{
        rotateImage(){
            this.rotating += 360;
            this.content = this.words[this.i%3].text;
            this.i += 1;
        },
        add_acount(){
            this.message.count += 1
        },
        jump_last(){
            this.$router.push('/infomation3')
        },
        jump_finish(){
            this.$router.push('/personinfomation')
        },
    }
}
</script>

<style scoped>

    .infomation4{
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 179, 138, 1);
    }

    .container{
        height: 85%;
        width: 30%;
        padding: 30px 40px;
        border-radius: 5px;
        background-color: white;
    }

    .font_text{
        margin-bottom: 25px;
        color: rgba(80, 80, 80, 1);
    }

    .header_box{
        display: flex;
        height: 50px;
    }

    .header_img_box{
        text-align: left;
    }

    
    .header_img{
        height:100%;
        margin-left: -12px;
        clip-path: circle();
        transform: scale()
    }
    
    .header_text_box{
        height: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        /* background-color: wheat; */
    }

    .header_text1 {
        margin-bottom: 5px;
        font-size: 13px;
        letter-spacing: 1.5px;
    }

    .header_text2{
        font-size: 13px;
        letter-spacing: 4px;
        color: rgba(166, 166, 166, 1);
    }

    .label_btn_box{
        margin: 15px 0;
        text-align: center;
    }

    .label_btn{
        width: 100%;
        padding: 8px;
        font-size: 13px;
        border-radius: 4px;
        font-weight: bold;
        display: inline-flex;   /* 关键 */
        align-items: center;    /* 垂直居中 */
        justify-content: center;/* 水平居中（可选） */
        border: 1.5px dashed rgba(5, 171, 133, 1);
        color: rgba(0, 179, 138, 1);
        background-color: white;
        cursor: pointer;
    }

    .desripetion{
        width: 100%;
        height: 150px;
        display: flex;
        flex-direction: column;
    }

    .list_select{
        height: 30px;
        padding: 7px;
        margin-top: -5px;
        border-radius: 3px;
        border: 1.2px solid rgba(204, 204, 204, 1);
        border-bottom: none;
    }

    .text{
        font-size: 13px;
        color: rgba(56, 56, 56, 1);
        letter-spacing: 1px;
        margin-bottom: 15px;
    }

    .smaple{
        width: 100%;
        margin-top: 15px;
        display: flex;
        flex-direction: column;
    }
    
    .smaple_header{
        height: 40px;
        display: flex;
    }

    .header_img_box1{
        height: 100%;
    }

    .header_img_name{
        display: flex;
        align-items: center;
        font-size: 13px;
    }

    .header_img_btn_parent{
        flex: 1;
        display: grid;
        justify-items: end;
    }

    .header_img_btn{
        float: right;
        display: flex;
        align-items: center;
    }

    .turn_btn{
        font-size: 13px;
        color: rgba(5, 171, 133, 1);
        display: flex;
        justify-content: center;
        border: none;
        background-color: white;
        cursor: pointer;
    }

    .showtextarea{
        margin-top: 15px;
        text-align: center;
         font-family: 'Microsoft YaHei', sans-serif;
    }

    textarea[readonly]{
        border: none;
        font-size: 13px;
        resize: none;
        outline: none;
    }

    .social_box{
        width: 100%;
    }

    .input_box{
        width: 100%;
        height: 32px;
        display: flex;
    }

    .input_form{
        flex: 9;
    }

    .input_btn{
        flex: 1;
    }

    .btn{
        height: 100%;
        width: 100%;
        border-radius: 0px 4px 4px 0px;
        color: white;
        background-color: rgba(0, 179, 138, 1);
        border: none;
        cursor: pointer;
    }

    .message{
        margin-top: 5px;
        margin-bottom: 15px;
    }

    .span_text1{
        font-size: 12px;
        color: rgba(166, 166, 166, 1);
    }

    img{
        height: 16px;
        margin-left: 10px;
    }

    .btn_box{
        height: 36px;
        width: 100%;
        display: flex;
    }

    .last_btn{
        flex: 1;
        text-align: center;
    }

    .finsh_btn{
        margin-left: 2%;
        flex: 3;
    }    

    button{
        height: 100%;
        width: 100%;
        padding: 5px;
        font-size: 12px;
        border-radius: 4px;
        border: none;
        color: white;
        background-color: rgba(0, 179, 138, 1);
        cursor: pointer;
    }

    .link_text{
        margin-top: 15px;
        font-size: 14px;
        text-align: center;
    }

    a{
        color: rgba(0, 179, 138, 1);
        text-decoration-color: rgba(0, 179, 138, 1);
    }

    ::v-deep(.el-textarea__inner) {
        background-color: rgba(246, 246, 246, 1);
        resize: none;
        border: none;
        font-size: 12px;
    }

    ::v-deep(.el-input__inner){
        background-color: rgba(246, 246, 246, 1);
        border: none;
        border-radius: 4px 0px 0px 4px;
    }

</style>